<template>
  <div
    style="width: 100%; height: 100%"
    class="statistics_box"
    :style="[style]"
  >
    <!-- 月度账单统计 -->
    <div class="title">月度账单统计</div>
    <div class="Max_box">
      <div class="header">
        <div class="left">
          <p>本月支出</p>
          <p>{{ newMonthBill.expenditure }}</p>
        </div>

        <div class="right green">
          <p>本月收入</p>
          <p>{{ newMonthBill.income }}</p>
        </div>

        <div class="residue">
          <p>结余</p>
          <p>{{ newMonthBill.income - newMonthBill.expenditure }}</p>
        </div>
      </div>

      <ul class="list">
        <li v-for="item in newMonthBill.list" :key="item._id">
          <div class="image">
            <img :src="item.iconImage" alt="" />
          </div>
          <div class="content">
            <p style="font-size: 14px">{{ item.title }}</p>
            <p :class="item.type == '01' ? '' : 'green'">
              {{ item.type == "01" ? "-" : "+" }}${{ item.money }}
            </p>
          </div>
        </li>
      </ul>
    </div>

    <div class="title">年度账单统计</div>

    <div class="Max_box" v-for="(item, index) in newYearBill" :key="index">
      <div class="header">
        <p>{{ item.years }}</p>

        <div class="left">
          <p>支出</p>
          <p>{{ item.expenditure }}</p>
        </div>

        <div class="right green">
          <p>收入</p>
          <p>{{ item.income }}</p>
        </div>

        <div class="residue">
          <p>结余</p>
          <p>{{ item.income - item.expenditure }}</p>
        </div>
      </div>

      <ul class="list">
        <li v-for="row in item.list" :key="row._id">
          <div class="image">
            <img :src="row.iconImage" alt="" />
          </div>
          <div class="content">
            <p style="font-size: 14px">{{ row.title }}</p>
            <p :class="row.type == '01' ? '' : 'green'">
              {{ row.type == "01" ? "-" : "+" }}${{ row.money }}
            </p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 年度账单统计 -->
  </div>
</template>

<script>
export default {
  props: {
    style: {
      type: Object,
      default() {
        return {
          "--background": "#262221",
          "--background_box": "#1c1a1b",
          "--color": "#fff",
          "--color_ramk": "#f1f1f1",
          "--image_color": "#fff",
          "--box-shadow": "0 0 10px 0 rgba(255, 255, 255, 0.3)",
        };
      },
      required: false,
    },

    // 月度账单
    monthBill: {
      type: Array,
      default() {
        return [];
      },
      required: false,
    },

    // 年度账单
    yearBill: {
      type: Array,
      default() {
        return [];
      },
      required: false,
    },
  },

  mounted() {},

  computed: {
    newMonthBill() {
      console.log("计算");
      let newArray = [];

      this.monthBill.forEach((item) => {
        let flag = true;
        if (newArray.length == 0) {
          newArray.push(item);
          flag = false;
        } else {
          newArray.forEach((row) => {
            if (item.title == row.title) {
              row.money = (Number(row.money) + Number(item.money)).toFixed(2); //合并金额
              flag = false;
            }
          });
        }

        if (flag) {
          newArray.push(item);
        }
      });

      // 计算本月支出和收入
      let income = 0; //收入
      let expenditure = 0; //支出

      newArray.forEach((item) => {
        if (item.type == "01") {
          expenditure = (Number(expenditure) + Number(item.money)).toFixed(2);
        } else {
          income = (Number(income) + Number(item.money)).toFixed(2);
        }
      });

      return {
        list: newArray,
        income: Number(income),
        expenditure: Number(expenditure),
      };
    },

    newYearBill() {
      console.log("计算");

      let newArray = [];

      this.yearBill.forEach((item) => {
        let flag = true;
        let month = new Date(item.createTime).getMonth() + 1; //月份
        let year = new Date(item.createTime).getFullYear();
        let years = year + "-" + (month < 10 ? "0" + month : month);
        if (newArray.length == 0) {
          let obj = {
            years: years,
            income: 0,
            expenditure: 0,
            list: [],
          };
          if (item.type == "01") {
            obj.expenditure = item.money;
          } else {
            obj.income = item.money;
          }

          obj.list.push(item);
          newArray.push(obj);
          flag = false;
        } else {
          newArray.forEach((row) => {
            let filer = true;
            if (years == row.years) {
              if (item.type == "01") {
                row.expenditure = (
                  Number(row.expenditure) + Number(item.money)
                ).toFixed(2); //收入
              } else {
                row.income = (Number(row.income) + Number(item.money)).toFixed(
                  2
                ); //支出
              }
              row.list.forEach((k) => {
                if (item.title == k.title) {
                  k.money = (Number(k.money) + Number(item.money)).toFixed(2);
                  filer = false;
                }
              });

              if (filer) {
                row.list.push(item);
              }

              flag = false;
            }
          });

          if (flag) {
            let obj = {
              years: years,
              income: 0,
              expenditure: 0,
              list: [],
            };

            if (item.type == "01") {
              obj.expenditure = (
                Number(obj.expenditure) + Number(item.money)
              ).toFixed(2);
            } else {
              obj.income = (Number(obj.income) + Number(item.money)).toFixed(2);
            }

            obj.list.push(item);
            newArray.push(obj);
          }
        }
      });

      console.log(newArray, "newArray");

      return newArray;
    },
  },

  data() {
    return {};
  },
};
</script>

<style scoped>
.statistics_box {
  background: var(--background_box);
  color: var(--color);
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}

.title {
  color: var(--color);
  font-size: 14px;
  margin: 10px 0;
}

.Max_box {
  width: 100%;
  background: var(--background_box);
  border-radius: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: var(--box-shadow);
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.Max_box .header {
  width: 100%;
  height: 40px;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color);
  font-weight: 700;
  font-size: 14px;
  padding: 0 10px;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.Max_box .list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.Max_box .list li {
  width: 48%;
  height: 50px;
  border-radius: 10px;
  background: var(--background);
  display: flex;
  margin: 5px 0;
}

.Max_box .list li .image {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Max_box .list li .image img {
  width: 60%;
  height: 60%;
}

.Max_box .list .content {
  color: var(--color);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.green {
  color: #1ba035;
}
</style>
